Uncaught SyntaxError: Unexpected identifierの原因と対処法！

Uncaught SyntaxError: Unexpected identifierの原因と対処法について知りたいときはないでしょうか。

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

Uncaught SyntaxError: Unexpected identifierについて

Uncaught SyntaxError: Unexpected identifierについて説明をします。

Uncaught SyntaxError: Unexpected identifierは、JavaScriptコードに文法エラーがある場合によく発生するエラーの1つです。

このエラーは、予期しない識別子（identifier）が出現する場合に発生します。

識別子とは、変数名、関数名、プロパティ名などのことを指します。

また識別子を構成する構文が誤っている場合も発生します。

Uncaught SyntaxError: Unexpected identifierが発生する原因と対処法

Uncaught SyntaxError: Unexpected identifierが発生する原因と対処法について説明をします。

構文を誤って記載した場合①

オブジェクトリテラル内の各プロパティ指定で必要なカンマなど忘れている場合に発生します。

エラー発生コード

// エラーが発生するコード
$('#target').css({
   color :'red'
   backgroundColor: 'black'
});

エラー内容

対処法

オブジェクトリテラル内の各プロパティはカンマで区切られている必要があります。2番目のプロパティの後にカンマを追加することで、構文エラーを解決できます。

// エラーを解消したコード
$('#target').css({
   color :'red',
   backgroundColor: 'black'
});

構文を誤って記載した場合②

関数の構文として誤っている場合に発生します。

エラー発生コード

関数の開始ブレース { を忘れている場合のコードとなります。

// エラーが発生するコード
function sayHello() 
  console.log("Hello!");
}

エラー内容

対処法

関数定義においては、開始ブレース { は、関数名の隣に書く必要があります。

// エラーを解消したコード
function sayHello() {
  console.log("Hello!");
}

タカヒロ

他にも:(コロン)や;(セミコロン)の漏れでも発生しますので注意しましょう。

宣言文を誤って記載した場合①

宣言文を誤って記載した場合にエラーが発生します。

エラー発生コード

// エラーが発生するコード
lt sayHello = "Hello!"

エラー内容

対処法

宣言文を正しい記載となるよう修正します。

// エラーを解消したコード
let sayHello = "Hello!"

タカヒロ

またletの他にconstやclassなど予約語として定義されている文字列は、変数名として使用することはできませんので注意しましょう。

宣言文を誤って記載した場合②

宣言文を大文字で記載した場合にエラーが発生します。

エラー発生コード

// エラーが発生するコード
Const isTrue = true;
console.log(isTrue);

エラー内容

対処法

宣言文を正しい記載となるよう修正します。

// エラーを解消したコード
const isTrue = true;
console.log(isTrue);

関数定義を誤って記載した場合

function関数定義を大文字で記載した場合にエラーが発生します。

エラー発生コード

// エラーが発生するコード
Function sayHello() {
  console.log("Hello!");
}
sayHello();

エラー内容

対処法

原因は、Functionの先頭文字が大文字になっているためです。関数定義をfunctionに修正します。

// エラーを解消したコード
function sayHello() {
  console.log("Hello!");
}
sayHello();

さいごに

いかがでしょうか。

今回は、

についてまとめました。

また、他にも役に立つ情報がありますので、よろしければご参照頂ければと思います。